<template>
	<view class="content">
		<!-- #ifdef MP-WEIXIN-->
		<ad :unit-id="adInfo.ad_id" v-if="adInfo.type === 1 && !isCustom" class="cutom-ad" />
		<view class="cutom-ad-box" v-if="adInfo.type === 1 && isCustom">
			<ad-custom :unit-id="adInfo.ad_id"  class="cutom-ad" />
		</view>
		
		<view class="last-box" v-if="adInfo.type === 2">
			<video class="ad-video" :src="adInfo.video_pic" v-if="adInfo.type === 2 && adInfo.show_type == 2">
				<view class="ad-tag" @click="openWebview(adInfo)">
					广告
				</view>
			</video>
			<block v-if="isCustom">
				<view class="img-box" v-if="adInfo.type === 2 && adInfo.show_type == 1">
					<image :mode="mode" class="ad-img" :src="adInfo.pic" @click="openWebview(adInfo)">
					</image>
					<view class="ad-tag">
						广告
					</view>
				</view>
			</block>
			<block v-else>
				<view class="img-box" v-if="adInfo.type === 2 && adInfo.show_type == 1">
					<image :mode="mode" class="ad-img" style="height: 150px;" :src="adInfo.pic" @click="openWebview(adInfo)">
					</image>
					<view class="ad-tag">
						广告
					</view>
				</view>
			</block>
			
		</view>

		<!-- #endif -->
		<!-- #ifdef APP-ANDROID || H5 -->
		<view @click="openWebview(adInfo)" class="app-img-box">
			<video class="ad-video" :src="adInfo.video_pic" v-if="adInfo.type === 2 && adInfo.show_type == 2">
				<view class="ad-tag">
					广告
				</view>
			</video>
			<view class="img-box" v-if="adInfo.type === 2 && adInfo.show_type == 1">
				<image :mode="mode" class="app-img" style="width: 100%;height: 150px;" :src="adInfo.pic">
					<view class="ad-tag">
						广告
					</view>
				</image>
			</view>

		</view>
		<!-- #endif -->
	</view>
</template>

<script>
// show_type 1是banner 2 是video
// type 0关闭 1流量主 2自定义
// [
//     'sign'               => '签到',
//     'score_shop'         => '生活缴费',
//     'charge_card_top'    => '充值卡顶部',
//     'charge_card_bottom' => '充值卡底部',
//     'help_center'        => '帮助中心',
//     'pay_top'            => '支付顶部',
//     'pay_middle'         => '支付中央',
//     'user_center'        => '个人中心'

// ];
export default {
	name: "BaseAd",
	props: {
		adInfo: {
			type: Object,
			default: () => ({})
		},
		isCustom: {
			type: Boolean,
			default: false
		},
		// mode="scaleToFill" 
		mode:{
			type:String,
			default:'aspectFit'
		}
	},
	methods: {
		openWebview(c) {
			if (c.url_type == 'goods_detail') {
				this.$u.route(`/pages/home/paymassage?num=${c.params.spu}`)
			} else if (c.url_type == 'goods_list') {
				this.$u.route({
					type: 'switchTab',
					url: '/pages/home/home'
				})
			} else if (c.url_type == 'shop_detail') {
				this.$u.route(`/pages/shopmassage/shopmassage?num=${c.params.shop_id}`)
			} else if (c.url_type == 'announce_detail') {
				this.$u.route(`/subcontract/mymassage/systemMessages/detail?announce_id=${c.params.announce_id}`)
			}
		},
	}
}
</script>

<style lang="less">
.content {
	// min-height:200px;
	width: 100%;
	height: 100%;
	position: relative;
}
.last-box{
	width: 100%;
	height: 100%;
}
.cutom-ad-box{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.cutom-ad {
	width: 100% !important;
}
.app-ad-box{
	.last-box{
		width: 100%;
		height: inherit;
	}
	.ad-img{
		height: auto !important;
	}
}
.app-img-box{
	height: 100% !important;
	.app-img{
		height: 100% !important;
	}
}

.ad-video {
	margin: 20rpx 0;
	width: 100%;
	// height: 100%;
	position: relative;


	/* height: 400rpx; */
	.ad-tag {
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		z-index: 100;
		background-color: rgba(218, 210, 210, 0.9);
		padding: 5rpx 10rpx;
		color: #fff;
		font-size: 18rpx;
		width: 60rpx;
		height: 30rpx;
		line-height: 30rpx;
		text-align: center;
	}

}

.img-box {
	position: relative;
    padding: 0 8px 12px 8px;
	height: 100%;
	.ad-img {
		// margin: 0 10px;
		width: 100%;
		
		// height: auto !important;
		// height: 100%;
		// height: 200rpx;
	}

	.ad-tag {
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		z-index: 100;
		background-color: rgba(218, 210, 210, 0.9);
		padding: 5rpx 10rpx;
		color: #333;
		font-size: 18rpx;
		width: 60rpx;
		height: 30rpx;
		line-height: 30rpx;
		text-align: center;
	}
}
</style>